<template>
	<view class="repairDemo" v-if="getRepairList&& getRepairList.length">
		<view class="repairHeader" v-for="(item,index) in getRepairList" :key="index">
			<view class="repairHeader-left">
				<view class="repairHeaderOne">
					<view class="text1">
					</view>
					<view class="text">
						<text>{{index + 1}}</text>
					</view>
					<view class="" style="font-weight: 600;">
						<text class="text2">{{item.pieceName}}</text>
					</view>
				</view>
				<view class="repairOver">
					<text>{{item.pieceStatus_Zn}} </text>
				</view>
			</view>
			<view>
				<view class="repairProject">
					<!-- 维修前 -->
					<view class="a" v-if="item.beforeImgs.length != 0">
						<view class="top_left" style="font-weight: 600;">
							<text>维修前</text>
						</view>
						<view class="fitting" @click="goToDatail(item.beforeImgs,item.pieceName)">
							<block v-for="(b,d) in item.beforeImgs" :key="d">
								<view v-if="(d == item.beforeImgs.length-1 && item.beforeImgs.length>3)"
									class="prj_img_detail" :style="{backgroundImage: 'url(' + b.filePath_T + ')',
							                              'background-repeat': 'no-repeat',
							                              'background-size': '100% 100%',
							                  'background-blend-mode':'multiply'
							                  }">
									<text style="color: #fff;">共{{item.beforeImgs.length}}张</text>
									<uni-icons color="#fff" type="forward" size="15">
									</uni-icons>
								</view>
								<fileImage v-else-if="d<4" :src="b.filePath_T" :className="['cidental']" />
							</block>
							<view class="aaa" v-if="item.beforeImgs.length == 0">
								<text>暂无施工图片...</text>
							</view>
						</view>
					</view>
					<!-- 维修中 -->
					<view class="a" v-if="item.middleImgs.length != 0">
						<view class="top_left">
							<text>维修中</text>
						</view>
						<view class="fitting" @click="goToDatail(item.middleImgs,item.pieceName)">
							<block v-for="(b,d) in item.middleImgs" :key="d">
								<view v-if="(d == item.middleImgs.length-1 && item.middleImgs.length>3)"
									class="prj_img_detail" :style="{backgroundImage: 'url(' + b.filePath_T + ')',
							                              'background-repeat': 'no-repeat',
							                              'background-size': '100% 100%',
							                  'background-blend-mode':'multiply'
							                  }">
									<text style="color: #fff;">共{{item.middleImgs.length}}张</text>
									<uni-icons color="#fff" type="forward" size="15">
									</uni-icons>
								</view>
								<fileImage v-else-if="d<4" :src="b.filePath_T" :className="['cidental']" />
							</block>
						</view>
					</view>
					<view class="a" v-if="item.afterImgs.length != 0">
						<view class="top_left">
							<text>维修后</text>
						</view>
						<view class="fitting" @click="goToDatail(item.afterImgs,item.pieceName)">

							<block v-for="(b,d) in item.afterImgs" :key="d">
								<view v-if="(d == item.afterImgs.length-1 && item.afterImgs.length>3)"
									class="prj_img_detail" :style="{backgroundImage: 'url(' + b.filePath_T + ')',
							                              'background-repeat': 'no-repeat',
							                              'background-size': '100% 100%',
							                  'background-blend-mode':'multiply'
							                  }">
									<text style="color: #fff;">共{{item.afterImgs.length}}张</text>
									<uni-icons color="#fff" type="forward" size="15">
									</uni-icons>
								</view>
								<fileImage v-else-if="d<4" :src="b.filePath_T" :className="['cidental']" />
							</block>
							<view class="aaa" v-if="item.afterImgs.length == 0">
								<text>暂无施工图片...</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	<view class="aaaa noneData" v-else>
		<image src="http://106.14.56.171:15016/images/images(4)(1)/images/noMessige.png" mode=""></image>
		<text>暂无数据...</text>
	</view>
</template>

<script>
	import fileImage from '@/components/fileImage/fileImage.vue'
	export default {
		props: ["qualified"],
		data() {
			return {
				id: 0,
				getRepairList: [],
				xfId: '',
				xfArr: []
			}
		},
		created() {
			console.log(this.qualified);
			this.id = this.qualified
			this.getRepair();
		},
		components: {
			fileImage
		},
		methods: {
			getRepair() {
				this.$http.get('api/Project/GetPrjQualifiedList?PrjInfoId=' + this.id).then(res => {
					this.getRepairList = res
					let lengths = this.getRepairList.length
					this.$emit('lengthsdd', lengths)
				})
			},
			goToDatail(item, pieceName) {
				let qualifiedItem = JSON.stringify(item)
				uni.navigateTo({
					url: '/pages/project/project_img/qualified_album?arr=' + qualifiedItem + '&pieceName=' +
						pieceName

				});
			},
		}
	}
</script>

<style lang="less" scoped>
	.repairHeader {
		margin-bottom: 25rpx;
		background-color: #fff;
		border-radius: 7px;
	}

	.repairDemo {
		// margin-top: 20rpx;
	}

	.repairHeader .repairHeader-left {
		display: flex;
		justify-content: space-between;
		height: 60rpx;
		text-align: center;
		line-height: 60rpx;
		background-color: #fff;
		margin-top: 5px;
		margin-left: 2%;
		padding: 5px 0 5px 0;
		border-radius: 7px;
	}

	.aaa text {
		width: 200rpx;
		height: 140rpx;
		display: inline-block;
		margin-top: 10rpx;
		border-radius: 20rpx;
		margin-bottom: 30rpx;
		text-align: center;
		font-size: 12px;
		line-height: 140rpx;
		margin-right: 230rpx;
		color: #666;
	}

	.repairHeader .repairHeader-left .repairHeaderOne {
		display: flex;
		width: 60%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.prj_img_detail {
		margin-left: 3%;
		width: 24%;
		height: 140rpx;
		margin-top: 10rpx;
		border-radius: 20rpx;
		margin-bottom: 30rpx;
		text-align: center;
		line-height: 140rpx;
	}

	.repairHeaderOne .text {
		position: absolute;
		width: 40rpx;
		height: 40rpx;
		border: 2px solid #B4001E;
		border-radius: 7rpx;
		line-height: 40rpx;
		margin-left: 3px;
		background-color: #fff;
		margin-top: 7rpx;
	}

	.repairHeaderOne .text2 {
		display: inline-block;
		font-size: 18px;
		margin-left: 20rpx;

	}

	.repairHeaderOne .text1 {
		width: 40rpx;
		height: 40rpx;
		border: 2px solid #B4001E;
		border-radius: 7rpx;
		line-height: 40rpx;
		margin-top: 12rpx;

	}

	.repairProject .a,
	.repairProject .b {
		background-color: #fff;
		width: 96%;
		margin-top: 5px;
		padding-bottom: 10px;
		margin-left: 2%;
		border-radius: 7px;
		font-weight: 600;
	}

	.repairProject .a .fitting {
		display: flex;
	}

	// .repairProject .a .fitting image {
	// 	margin-left: 3%;
	// 	width: 150rpx;
	// 	height: 150rpx;
	// }

	.top_left {
		font-weight: 600;
		padding: 10px 0 10px 5px
	}

	.repairOver {
		margin-right: 20rpx;
	}

	.repairOver text {
		display: inline-block;
		background-color: #ecf4f0;
		height: 40rpx;
		width: 120rpx;
		font-size: 24rpx;
		color: #3E9265;
		border-radius: 20rpx;
		text-align: center;
		line-height: 40rpx;
	}

	.aaaa {
		margin-top: 300rpx;
		width: 100%;
		height: 100%;
		opacity: 0.6;
	}

	// 暂无数据
	.noneData {
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: space-around;

		>image {
			width: 200rpx;
			height: 200rpx;
		}

		>text {
			margin-top: 20rpx;
			font-size: 26rpx;
		}
	}
</style>
<style lang="less">
	.cidental {
		margin-left: 20rpx;
		width: 140rpx;
		height: 140rpx;
		margin-top: 10rpx;
		border-radius: 20rpx;
		margin-bottom: 30rpx;
		text-align: center;
		line-height: 140rpx;
	}
</style>
